<template>
  <div class="flex items-center whitespace-nowrap">
    <el-input v-model="discountVal" />
    <el-checkbox
      class="ml-[16px]"
      v-model="noDiscount"
      :true-label="1"
      :false-label="0"
    >
      里面折扣自动全折为1
    </el-checkbox>
    <div class="ml-[8px] text-[12px] text-[#999] leading-[17px]">
      <svg-icon icon-class="hint_line" class="text-[14px] inline-block" />
      <!-- <span class="iconfont icon-hint_line align-bottom"></span> -->
      <span>费用折扣中 1 不打折。例如：打8折,填写:0.8</span>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  value: { type: Object, default: () => ({}) },
})

const discountVal = ref()
const noDiscount = ref()

const emit = defineEmits(['input'])

watch(
  () => [discountVal.value, noDiscount.value],
  val => {
    const [_discountVal, _noDiscount] = val || []
    if (!_discountVal) {
      emit('input', null)
      return
    }
    emit(
      'input',
      val ? { discount: _discountVal, inner_no_discount: _noDiscount } : null
    )
  }
)

watch(
  () => props.value,
  val => {
    const { discount = '', inner_no_discount = false } = val || {}
    discountVal.value = discount
    noDiscount.value = inner_no_discount
  }
)
</script>
